<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/style.css" rel="stylesheet" />
    <script src="js/echarts.min.js"></script>
</head>
<body class="nei_body">
<div class="wrap">
    <div class="shou_box1">
        <div class="shou_box1_box1">
            <div class="shou_box1_box1_1"><img src="images/shou_icon1.png"><span>会员总数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1">
            <div class="shou_box1_box1_1"><img src="images/shou_icon3.png"><span>积分总数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1">
            <div class="shou_box1_box1_1"><img src="images/shou_icon2.png"><span>总储值金额</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1">
            <div class="shou_box1_box1_1"><img src="images/shou_icon4.png"><span>总收入</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
    </div>
    <div class="shou_box2_box2">
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>银卡会员人数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>金卡会员人数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>钻石卡会员人数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>至尊黑卡会员人数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>银卡会员积分数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>金卡会员积分数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>钻石卡会员积分数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
        <div class="shou_box1_box1 shou_box2_1">
            <div class="shou_box1_box1_1"><span>至尊黑卡会员积分数</span></div>
            <div class="shou_box1_box1_2">5914</div>
        </div>
    </div>

    <div class="shou_box2">
        <div class="shou_time">
            <span>日期：</span>
            <input type="datetime-local" placeholder="">
            <b>-</b>
            <input type="datetime-local" placeholder="">
            <input type="submit" value="查询" class="cha_xun">
        </div>
    </div>

    <div class="shou_box3">
        <div class="shou_box3_1">
            <div id="main" style="width: 96%;height: 400px;margin: 0 auto;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var option = {
                    color: ['#ff7900','#37A2DA'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['会员数','积分数']
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    grid: {
                        top:'20%',
                        left: '6%',
                        right: '0',
                        bottom: '10%'
                    },
                    series: [
                        {
                            name: '会员数',
                            type: 'bar',
                            data: [98, 234, 378, 154, 256, 667, 135, 162, 326, 200, 264, 333],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            }
                        },
                        {
                            name: '积分数',
                                    type: 'bar',
                                data: [88, 347, 178, 184, 356, 567, 235, 262, 326, 160, 64, 33],
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
        </div>
        <div class="shou_box3_2">
            <div id="main2" style="width: 100%;height: 400px;margin: 0 auto;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main2'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '射箭俱乐部会员等级占比',
                        subtext: '会员等级',
                        left: 'center'
                    },
                    color: ['#E7BCF3','#A5D2FF','#f4e141','#FF9F7F'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal', //vertical
                        x: "center",
                        y: "bottom",
                        data: ['银卡会员', '金卡会员', '钻石卡会员', '至尊黑卡会员']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '45%',
                            center: ['50%', '55%'],
                            data: [
                                {value: 335, name: '银卡会员'},
                                {value: 310, name: '金卡会员'},
                                {value: 234, name: '钻石卡会员'},
                                {value: 135, name: '至尊黑卡会员'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
        </div>
    </div>
</div>
</body>
</html>